<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="layout">
        <!-- 第一列 -->
        <div class="left">
            <!-- 设备总数 -->
            <div class="sum common">
                <div class="inner">
                    <div class="item">
                        <h2>2190</h2>
                        <span>
                            <i class="icon-dot" style="color :blue"></i>设备总数
                        </span>
                    </div>
                    <div class="item">
                        <h2>190</h2>
                        <span>
                            <i class="icon-dot"  style="color :green"></i>季度新增
                        </span>
                    </div>
                    <div class="item">
                        <h2>3001</h2>
                        <span>
                            <i class="icon-dot"  style="color :green"></i>运营设备
                        </span>
                    </div>
                    <div class="item">
                        <h2>108</h2>
                        <span>
                            <i class="icon-dot"  style="color :red"></i>异常设备
                        </span>
                    </div>
                </div>
            </div>
            <!-- 监控异常 -->
            <div class="fault common">
                <div class="inner">
                   <div class="Tab">
                    <a href="javascript:void(0)" class="active" data-index='0'>故障设备监控</a>
                       <a href="javascript:void(0)" data-index='1'>异常设备监控</a>
                   </div>
                   <div class="content" style="display: block;">
                       <div class="menu">
                           <span>故障时间</span>
                           <span>设备地址</span>
                           <span>异常代码</span>
                       </div>
                       <div class="list">
                           <ul>
                               <li>
                                   <span>20200306</span>
                                   <span>安徽省阜阳市</span>
                                   <span>11111</span>
                                   <span class="icon-dot" style="color: red;"></span>
                               </li>
                               <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>22222</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>33333</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>44444</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>55555</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>66666</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>77777</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>88888</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>99999</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>10101</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>11111</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                            <li>
                                <span>20200306</span>
                                <span>安徽省阜阳市</span>
                                <span>12121</span>
                                <span class="icon-dot" style="color: red;"></span>
                            </li>
                           </ul>
                       </div>
                   </div>
                   <div class="content">
                    <div class="menu">
                        <span>故障时间</span>
                        <span>设备地址</span>
                        <span>异常代码</span>
                    </div>
                    <div class="list">
                        <ul>
                            <li>
                                <span>20200307</span>
                                <span>安徽省阜阳市</span>
                                <span>11111</span>
                            </li>
                            <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>22222</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>33333</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>44444</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>55555</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>66666</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>77777</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>88888</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>99999</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>10101</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>11111</span>
                         </li>
                         <li>
                             <span>20200307</span>
                             <span>安徽省阜阳市</span>
                             <span>12121</span>
                         </li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
            <!-- 占位站点分布统计 -->
            <div class="census common">
                <div class="inner">
                    <h2>占位站点分布统计</h2>
                    <div class="site">
                        <div class="draw"></div>
                        <div class="number">
                            <div class="item">
                                <h3>320,11</h3>
                                <span>
                                    <i class="icon-dot"  style="color :red"></i>点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h3>418</h3>
                                <span>
                                    <i class="icon-dot"  style="color :yellow"></i>本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二列 -->
        <div class="center">
            <div class="map">
                <i class="icon-cube" style="color: red;"></i>设备数据统计
                <div class="city-map">
                    <!-- 这是一个地图 -->
                </div>
            </div>
            <div class="graph common">
                <div class="inner">
                   <h2>全国用户总量统计</h2>
                   <div class="city-census">
                    <div class="bar-chart">这是一个条形图</div>
                    <div class="num">
                        <div class="item">
                            <h3>320,11</h3>
                            <span>
                                <i class="icon-dot"  style="color :red"></i>点位总数
                            </span>
                        </div>
                        <div class="item">
                            <h3>418</h3>
                            <span>
                                <i class="icon-dot"  style="color :yellow"></i>本月新增
                            </span>
                        </div>
                    </div>
                   </div>
                </div>
            </div>
        </div>
        <!-- 第三列 -->
        <div class="right">
            <!-- 订单量 -->
            <div class="data common">
                <div class="inner">
                   <div class="time">
                    <a href="javascript:void(0)" class="active" data-index='day365'>365天</a>
                    <a href="javascript:void(0)" data-index='day90'>90天</a>
                    <a href="javascript:void(0)" data-index='day30'>30天</a>
                    <a href="javascript:void(0)" data-index='day1'>24小时</a>
                   </div>
                   <div class="sell">
                    <div class="item">
                        <h3 class="data_orders">987</h3>
                        <span>
                            <i class="icon-dot"  style="color :red"></i>订单量
                        </span>
                    </div>
                    <div class="item">
                        <h3 class="data_count">834</h3>
                        <span>
                            <i class="icon-dot"  style="color :yellow"></i>销售额(万元)
                        </span>
                    </div>
                   </div>
                </div>
            </div>
            <!-- 销售额统计 -->
            <div class="sales common">
                <div class="inner">
                  <div class="year">
                      <h2>销售额统计</h2>
                      <div class="l">
                      <a href="javascript:void(0)" class="active" data-index='year'>年</a>
                      <a href="javascript:void(0)" data-index='quarter'>季</a>
                      <a href="javascript:void(0)" data-index='month'>月</a>
                      <a href="javascript:void(0)" data-index='week'>周</a>
                      </div>
                  </div>
                  <div class="line">
                      
                  </div>
                </div>
            </div>

            <!-- 渠道分布 -->
            <div class="range">
                <div class="spread common">
                   <div class="inner">
                       <h2>渠道分布</h2>
                       <div class="sky">
                        <div class="item">
                            <h3><span>39</span>%</h3>
                            <span>
                                <i class="icon-dot" style="color: seagreen;"></i>机场
                            </span>
                        </div>
                        <div class="item">
                            <h3><span>39</span>%</h3>
                            <span>
                                 <i class="icon-dot" style="color: seagreen;"></i>机场
                            </span>
                        </div>
                        <div class="item">
                            <h3><span>39</span>%</h3>
                            <span>
                                 <i class="icon-dot" style="color: seagreen;"></i>机场
                            </span>
                        </div>
                        <div class="item">
                            <h3><span>39</span>%</h3>
                            <span>
                                 <i class="icon-dot" style="color: seagreen;"></i>机场
                            </span>
                        </div>
                       </div>
                   </div>
                </div>
                <div class="rate common">
                    <div class="inner">
                        <h2>一季度销售进度</h2>
                        <div class="pre">
                            <div class="circle"></div>
                            <span>75%</span>
                        </div>
                        <div class="money">
                            <div class="item">
                                <h3>1,321</h3>
                                <span>
                                    <i class="icon-dot" style="color: chartreuse;"></i>销售额(万元)
                                </span>
                            </div>
                            <div class="item">
                                <h3>150%</h3>
                                <span>
                                    <i class="icon-dot" style="color: red;"></i>同比增长
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    <!-- 全国热榜 -->
            <div class="rank common">
                <div class="inner">
                   <div class="hot">
                       <h3>全国热榜</h3>
                       <span>
                        <i class="icon-cup1" style="color:red"></i>香飘飘
                    </span>
                    <span>
                        <i class="icon-cup1" style="color:green"></i>AD奶
                    </span>
                    <span>
                        <i class="icon-cup1" style="color:blue"></i>奥利奥
                    </span>
                    </div>
                   <div class="city">
                       <h3>各省热销</h3>
                       <ul class="scale">
                        <li>
                            <span>北京</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>广州</span>
                            <span>25.233 <i class="icon-down"></i></span>
                        </li>
                        <li>
                            <span>武汉</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>北京</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>上海</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                       </ul>
                   </div>
                   <div class="day">
                       <h3>//近30日//</h3>
                       <ul class="scale">
                        <li>
                            <span>北京</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>广州</span>
                            <span>25.233 <i class="icon-down"></i></span>
                        </li>
                        <li>
                            <span>武汉</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>北京</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                        <li>
                            <span>上海</span>
                            <span>25.233 <i class="icon-up"></i></span>
                        </li>
                       </ul>
                   </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/map.js"></script>
</html>